<template>
  <div class="login-bg">
    <div class="login-bg-mask">
      <div class="login-content">
        <div class="login-content-mask">
          <div class="login-content-left">
            <!-- <div class="login-content-left-title1">BACKGROUND MANAGEMENT SYSTEM</div> -->
            <div class="login-content-left-title1">TECHNOLOGY INTELLIGENCE SYSTEM</div>
            <!-- <div class="login-content-left-title2">慧联科技智慧系统</div> -->
            <div class="login-content-left-title2">手枪智能门锁后台管理系统</div>
          </div>
          <div class="login-content-right">
            <div class="login-content-right-login">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$router.push("/login");
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
@media screen and (min-width: 1330px) {
  .login{
    &-bg {
    width: 100%;
    height: 100%;
    }
  }
}

@media screen and (min-height: 602px) {
  .login{
    &-bg {
    width: 100%;
    height: 100%;
    }
  }
}

.login {
  &-bg {
    // width: 100%;
    // height: 100%;
    margin: 0;
    /* 让图像显示的重点 */
    position: absolute;
    left: 0;
    top: 0;

    background: url("../../assets/img/login/login-bg.jpg") no-repeat;
    /* 设置背景位置为右上角 */
    background-position: top right;
    /* 设置背景最大实现平铺 */
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* 设置背景固定 */
    background-attachment: fixed;

    &-mask {
      width: 100%;
      height: 100%;
      background: rgba(11, 30, 99, 0.7);
      padding: 30px;
      // opacity: 0.5;
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    background: url("../../assets/img/login/login-bg.jpg") no-repeat;
    /* 设置背景最大实现平铺 */
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    &-mask {
      width: 100%;
      height: 100%;
      background: rgba(46, 51, 97, 0.3);
      box-shadow: 0 0 100px 1px rgb(36, 36, 36);
      display: flex;
    }

    &-left {
      height: 100%;
      flex: 1;
      min-width: 870px;
      text-align: right;
      // padding-right: 30px;
      padding: 35% 50px 0 0;
      &-title1{
        display: inline-block;
        color: white;
        font-size: 45px;
        font-weight: 400;
      }

      &-title2{
        position: relative;
        color: white;
        font-size: 20px;
      }

    }
    &-right {
      width: 400px;
      height: 100%;
      background: white;
      &-login{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}



/* css3动画，浮现效果 */
/* @keyframes fade-in {
  0% {
    opacity: 0;
    top: 25%;
  } 
  100% {
    opacity: 1;
    top: 15%;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    top: 30%;
  }
  100% {
    opacity: 1;
    top: 23%;
  }
}
.content {
  animation: fade-in; 
  animation-duration: 1.5s; 
  -webkit-animation: fade-in 1.5s; 
} */
</style>
